在 react 的命名原則中，除了 component 和 type 是 Pascal Case，其他大部分會多以 Camel Case 為主，當然有些例外譬如 customer Hook, 或是常數的命名就會有另外的原則，但大致上遵照
這樣的原則。

• 使用 Camel Case 單詞連接並不包含 _ - . 等符號

BAD

 const currency-token = '$'
 const country_code = 'US'

GOOD

 const currencyToken = '$'
 const countryCode = 'US'

註：有些 api 格式常會提供 _ 下底線的連接詞(user_profile)，造成前端必須以下底線的變數去解構資料，這邊強調的以前端的變數命名為主，詳細資料的介接，還是需要考慮到後端的變數設計，或許可以統一寫個 function
處理後端 - 的變數命名轉成 Camel Case

• 有意義的命名

第一天我們提到以下的範例，這邊會把範例中一項一項拆分講解

BAD

const aaa = 234234234

// 在維續時根本不知道 aaa 是什麼

• [x] 變數具備語意化和名詞為主
  GOOD

const orderId = 234234234

// 這樣可以具體知道他是訂單號碼

BAD

const doJob = ()=>{
.........
}

// 當 do 的 function 一多，根本不知道 doJob 指的是什麼功能

• [x] function (方法)具備語意化和動詞 + 名詞為主

GOOD

const createOrder = ()=>{
.........
}

// 可以具體知道他是建立(動詞)+訂單(名詞)

const fetchUserData = ()=>{
.........
}

BAD

<stickyButton></stickyButton>

// component 沒有使用 Pascal Case

• [x] React component 和 React tag 需以 Pascal Case 為主

GOOD

//JSX tag

<StickyButton></StickyButton>